<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base/j-basic.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/module/cover/cover.css">
    <link rel="stylesheet" href="./css/module/cup/cup.css">
    <link rel="stylesheet" href="./css/module/nav/nav.css">
    <link rel="stylesheet" href="./css/module/screen-outer/screen-outer.css">
</head>

<body>
    <div class="container">
        <header class="container cover">
            <!-- 顶层导航条 -->
            <nav class="container-m cover-nav clear-float">
                <ul class="fl cover-left">
                    <li class="fl pr arrow-down">
                        <span>中国大陆</span>
                        <ul class="pa nav-origin">
                            <li class="list-item"><a href="#">全球</a></li>
                            <li class="list-item"><a href="#">中国大陆</a></li>
                            <li class="list-item"><a href="#">香港</a></li>
                        </ul>
                    </li>
                    <li class="fl">
                        <a href="#" class="sign-in">亲，请登录</a>
                        <a href="#" class="sign-up">免费注册</a>
                    </li>
                    <li class="fl"><a href="#">手机逛淘宝</a></li>
                </ul>
                <ul class="fr cover-right">
                    <li class="fr pr arrow-down nav-icon nav-nav">
                        <span>网站导航</span>
                        <div class="nav-full-panel">
                            <section class="nav-column theme-market">
                                <h2>主题市场</h2>
                                <div class="column-body">
                                    <ul class="clear-float">
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                女装
                                                <i class="new"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">二手车</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                女装
                                                <i class="hot"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                    </ul>
                                </div>
                            </section>
                            <section class="nav-column special-market">
                                <h2>特色市场</h2>
                                <div class="column-body">
                                    <ul>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                阿里拍卖
                                                <i class="new"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">淘宝众筹</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                女装
                                                <i class="hot"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                    </ul>
                                </div>
                            </section>
                            <section class="nav-column ali-app">
                                <h2>阿里APP</h2>
                                <div class="column-body">
                                    <ul>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                女装
                                                <i class="new"></i>
                                            </a></li>
                                        <li><a href="#">虾米音乐</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">支付宝</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">钉钉</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">高德地图</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                蚂蚁聚宝
                                                <i class="hot"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                    </ul>
                                </div>
                            </section>
                            <section class="nav-column favorite-recommend">
                                <h2>精彩推荐集</h2>
                                <div class="column-body">
                                    <ul>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">爱逛街</a></li>
                                        <li><a href="#">
                                                女装
                                                <i class="new"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">米拍秀</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">天天特卖</a></li>
                                        <li><a href="#">
                                                女装
                                                <i class="hot"></i>
                                            </a></li>
                                        <li><a href="#">女装</a></li>
                                        <li><a href="#">
                                                阿里巴巴认证
                                                <i class="hot"></i>
                                            </a></li>
                                    </ul>
                                </div>
                            </section>
                        </div>
                    </li>
                    <li class="fr pr arrow-down">
                        <span>联系客服</span>
                        <ul class="pa">
                            <li class="list-item"><a href="#">消费者客服</a></li>
                            <li class="list-item"><a href="#">卖家客服</a></li>
                        </ul>
                    </li>
                    <li class="fr pr arrow-down">
                        <span>千牛卖家中心</span>
                        <ul class="pa">
                            <li class="list-item"><a href="#">免费开店</a></li>
                            <li class="list-item"><a href="#">已卖出的宝贝</a></li>
                            <li class="list-item"><a href="#">出售中的宝贝</a></li>
                            <li class="list-item"><a href="#">卖家服务市场</a></li>
                            <li class="list-item"><a href="#">卖家培训中心</a></li>
                            <li class="list-item"><a href="#">体检中心</a></li>
                            <li class="list-item"><a href="#">问商友</a></li>
                        </ul>
                    </li>
                    <li class="fr">|</li>
                    <li class="fr"><a href="#">商品分类</a></li>
                    <li class="fr pr arrow-down nav-icon nav-star">
                        <span>收藏夹</span>
                        <ul class="pa">
                            <li class="list-item"><a href="#">收藏的宝贝</a></li>
                            <li class="list-item"><a href="#">收藏的店铺</a></li>
                        </ul>
                    </li>
                    <li class="fr pr arrow-down nav-icon nav-cart">
                        <span>购物车</span>
                    </li>
                    <li class="fr pr arrow-down nav-mine">
                        <span>我的淘宝</span>
                        <ul class="pa">
                            <li class="list-item"><a href="#">已买到的宝贝</a></li>
                            <li class="list-item"><a href="#">我的足迹</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <!-- 导航横幅 -->
            <nav class="cover-banner">
                <div class="container-m clear-float">
                    <a href="#" class="tmall-logo">
                        <img src="./img/tmall-logo.png" alt="">
                    </a>
                    <ul class="clear-float">
                        <li class="fl">
                            <a href="#" class="pr card-green">
                                <div class="pa banner-head-desc">
                                    <h4>奶粉尿裤</h4>
                                    <p>抢600元券</p>
                                </div>
                                <div class="pa banner-head-img">
                                    <img src="./img/card-item-1.webp" alt="" width=52 height=52>
                                </div>
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#" class="pr card-blue">
                                <div class="pa banner-head-desc">
                                    <h4>冰洗会场</h4>
                                    <p>波轮699起</p>
                                </div>
                                <div class="pa banner-head-img">
                                    <img src="./img/card-item-2.webp" alt="" width=52 height=52>
                                </div>
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#" class="pr card-purple">
                                <div class="pa banner-head-desc">
                                    <h4>运动鞋服</h4>
                                    <p>全场不止3折</p>
                                </div>
                                <div class="pa banner-head-img">
                                    <img src="./img/card-item-3.webp" alt="" width=52 height=52>
                                </div>
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#" class="pr card-orange">
                                <div class="pa banner-head-desc">
                                    <h4>时尚内衣</h4>
                                    <p>低至29元</p>
                                </div>
                                <div class="pa banner-head-img">
                                    <img src="./img/card-item-4.webp" alt="" width=52 height=52>
                                </div>
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#" class="pr card-pink">
                                <div class="pa banner-head-desc">
                                    <h4>大牌男装</h4>
                                    <p>直降300元</p>
                                </div>
                                <div class="pa banner-head-img">
                                    <img src="./img/card-item-5.webp" alt="" width=52 height=52>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <section class="container cup">
            <div class="cup-content">
                <div class="container-m pr">
                    <div class="logo">
                        <h1>
                            <a href="#" class="taobao-logo">淘宝网</a>
                        </h1>
                    </div>
                    <div class="search-container">
                        <div class="search-box">
                            <div class="search-tab clear-float">
                                <ul>
                                    <li class="fl over">宝贝</li>
                                    <li class="fl">天猫</li>
                                    <li class="fl">店铺</li>
                                </ul>
                            </div>
                            <div class="search-panel">
                                <div class="search-wrapper">
                                    <input class="search-inp" type="text">
                                    <i class="search-camera"></i>
                                </div>
                                <button class="search-btn">搜索</button>
                            </div>
                        </div>
                        <div class="quick-list">
                            <a href="#">新款连衣裙</a>
                            <a href="#">四件套</a>
                            <a href="#" class="h">潮流T恤</a>
                            <a href="#">时尚女鞋</a>
                            <a href="#">短裤</a>
                            <a href="#">半身裙</a>
                            <a href="#">男士外套</a>
                            <a href="#">墙纸</a>
                            <a href="#">行车记录仪</a>
                            <a href="#">新款男鞋</a>
                            <a href="#">耳机</a>
                            <a href="#">时尚女包</a>
                            <a href="#">沙发</a>
                        </div>
                    </div>
                    <div class="t-618">
                        <a href="" class="taobao-app fr">
                            <span class="app-title">手机淘宝</span>
                            <img src=""
                                alt="">
                        </a>
                        <a href="" class="close fr">x</a>
                    </div>
                </div>
            </div>
        </section>
        <section class="container nav">
            <div class="container-m clear-float">
                <h2 class="fl">主题市场</h2>
                <ul class="fl">
                    <li class="fl"><a href="#">天猫</a></li>
                    <li class="fl"><a href="#">聚划算</a></li>
                    <li class="fl"><a href="#">天猫超市</a></li>
                </ul>
                <ul class="fl">
                    <li class="fl split"><a href="#">|</a></li>
                    <li class="fl"><a href="#">淘抢购</a></li>
                    <li class="fl"><a href="#">电器城</a></li>
                    <li class="fl"><a href="#">司法拍卖</a></li>
                    <li class="fl"><a href="#">淘宝心选</a></li>
                    <li class="fl"><a href="#">兴农扶贫</a></li>
                </ul>
                <ul class="fl">
                    <li class="fl split"><a href="#">|</a></li>
                    <li class="fl"><a href="#">飞猪旅行</a></li>
                    <li class="fl"><a href="#">智能生活</a></li>
                    <li class="fl"><a href="#">苏宁易购</a></li>
                </ul>
            </div>
        </section>
        <section class="container screen-outer">
            <div class="container-m pr">
                <div class="main fl">
                    <div class="main-top pr">
                        <div class="main-menu">
                            <ul class="menu-bar">
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">童装玩具</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                                <li class="a-all arrow-down arrow-right">
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a> /
                                    <a href="#">美食</a>
                                </li>
                            </ul>
                        </div>
                        <div class="main-center clear-float">
                            <div class="main-slider">
                                <div class="slider">
                                    <div class="slider-list clear-float">
                                        <a href="#"><img src="img/slider-1.jpg" alt=""></a>
                                        <a href="#"><img src="img/slider-2.webp" alt=""></a>
                                        <a href="#"><img src="img/slider-3.jpg" alt=""></a>
                                    </div>
                                </div>
                                <div class="tmall-slider">
                                    <div class="tmall-head">
                                        <span class="hd-bg" style="background-image: url(&quot;&quot;);"></span>
                                        <span>理想生活上天猫</span>
                                    </div>
                                    <div class="slider">
                                        <div class="slider-list clear-float">
                                            <div class="slider-items col-2">
                                                <a href="#"><img src="img/slider-tmall-left-1.jpg" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-right-1.jpg" alt=""></a>
                                            </div>
                                            <div class="slider-items col-4">
                                                <a href="#"><img src="img/slider-tmall-12-1.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-2.jpg" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-3.jpg" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-4.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-5.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-1.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-2.jpg" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-3.jpg" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-4.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-5.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-1.png" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-12-2.jpg" alt=""></a>
                                            </div>
                                            <div class="slider-items col-2">
                                                <a href="#"><img src="img/slider-tmall-left-1.jpg" alt=""></a>
                                                <a href="#"><img src="img/slider-tmall-right-1.jpg" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-right">
                                <div class="slider-right">
                                    <a href="#"><img src="img/slider-right.webp" alt=""></a>
                                </div>
                                <div class="tmall-right">
                                    <span class="tmall-right-title">今日热卖</span>
                                    <a href="#"><img src="img/tmall-slider-right.jpg" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="main-bottom">

                    </div>
                </div>
                <div class="col-right fr"></div>
            </div>
        </section>
    </div>
</body>

</html>